<template>
  <view>
    <button class="btn"></button>
    <uni-data-picker placeholder="请选择班级" popup-title="请选择所在地区" :localdata="dataTree" v-model="classes"
      @change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
    </uni-data-picker>
    <button class="next-step">下一步</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        classes: '1-2',
        dataTree: [{
            text: "一年级",
            value: "1-0",
            children: [{
                text: "1.1班",
                value: "1-1"
              },
              {
                text: "1.2班",
                value: "1-2"
              }
            ]
          },
          {
            text: "二年级",
            value: "2-0",
            children: [{
                text: "2.1班",
                value: "2-1"
              },
              {
                text: "2.2班",
                value: "2-2"
              }
            ]
          },
          {
            text: "三年级",
            value: "3-0",
            disable: true
          }
        ]
      }
    },
    methods: {
      onnodeclick(e) {
        console.log(e);
      },
      onpopupopened(e) {
        console.log('popupopened');
      },
      onpopupclosed(e) {
        console.log('popupclosed');
      },
      onchange(e) {
        console.log('onchange:', e);
      }
    }
  }
</script>

<style>
  .btn {}

  .next-step {
    position: fixed;
    left: 0;
    bottom: 0;
  }
</style>